
<!DOCTYPE html>
<html>
<head><link rel="shortcut icon" href="http://likexia.gitee.io/tools/lib/img/h5.png" type="image/x-icon">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>3D旋转效果</title>
</head>
<style type="text/css">
body { border: none; margin: 0; background-color: #0D3462; }
li {
	list-style: none;
}
ul {
	margin: 0;
	padding: 0;
}

.contentbox {
	width: 1000px;
	margin: auto;
	margin-top: 2em;
	clear:left;
}
.qcontainer {
	-webkit-perspective: 400;
	-moz-perspective: 400;
	float: left;
	width: 220px;
	margin-right:20px;
}
.film {
    width: 100%;
    height: 300px;
	-webkit-transform-style: preserve-3d;
	-webkit-transition: 1.5s;
	-moz-transform-style: preserve-3d;
	-moz-transition: 1.5s;	
}
.qcontainer:hover .film {
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
}
.face {
	position: absolute;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;	
}
.face h3 {
	color: white;
	text-align: center;
}
.back {
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
	background: -webkit-gradient(linear, left top, left bottom, from(#fdbb5a), to(#db5726));
	background: -moz-linear-gradient(top, #fdbb5a, #db5726);
	width:220px;
	height:300px;
}
.foot{
	text-align: center;
	color: #fff;
	position: fixed;
	bottom: 20px;
	left: 50%;
	margin-left:-126px;	
	font-size: 12px;
	font-family: "微软雅黑"；

}
</style>
<body>

<div class="contentbox">
		<div class="qcontainer">
			<div class="film">
				<div class="face front">
					<img src="images/1.jpg">
				</div>
				<div class="face back"><h3>这是老大!!</h3></div>
			</div>
		</div>
		<div class="qcontainer">
			<div class="film">
				<div class="face front">
					<img src="images/2.jpg">
				</div>
				<div class="face back"><h3>这是大姐头!!</h3></div>
			</div>
		</div>
		<div class="qcontainer">
			<div class="film">
				<div class="face front">
					<img src="images/3.jpg">
				</div>
				<div class="face back"><h3>这是小清!!</h3></div>
			</div>
		</div>
		<div class="qcontainer">
			<div class="film">
				<div class="face front">
					<img src="images/4.jpg">
				</div>
				<div class="face back"><h3>这是学霸!!</h3></div>
			</div>
		</div>
</div>

<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
<script>
	$(function)
</script>
</body>
</html>


